<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基本使用</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>{{msg}}</h1>
      <hr />
      <!-- 第三步：编写组件标签 -->
      <school></school>
      <school></school>
      <hr />
      <hello></hello> 
      <student></student>
    </div>

    <div id="root2">
      <hello></hello>
    </div>
  </body>
  <script>
    // 第一步：创建一个school组件
    const school = Vue.extend({
      // el: "#root", //组件定义时一定不要写el配置项,因为最终所有的组件都要被 vm 管理,由 vm 决定服务于哪个容器
      // 模板
      template: ` 
      <div>
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
      </div>
      `,
      // template必须要有一个根元素,根元素参与解析渲染
      // 数据
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      methods: {
        showName() {
          console.log(this);
          alert(this.schoolName);
        },
      },
    });

    // 第一步：创建student组件
    const student = Vue.extend({
      template: `
      <div>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
      </div>
      `,
      data() {
        return {
          studentName: "张三",
          age: "18",
        };
      },
    });

    // 第一步：创建一个hello组件
    const hello = Vue.extend({
      template: `
      <div>
        <h2>你好啊 {{name}}</h2>
      </div>
      `,
      data(){
        return{
          name:"Tom"
        }
      }
    });

    // 第二步：全局注册组件
    Vue.component("hello",hello)

    // 创建vm
    new Vue({
      el: "#root",
      data: {
        msg: "hello component",
      },
      // 第二步：注册组件(局部注册)
      components: {
        school,
        student,
      },
    });

    // 创建vm2
    new Vue({
      el: "#root2",
    });

    /*  当data为对象时,当修改x2时x1也会发生改变,但data为函数时修改x1时不会影响x2的值
    function data(){
      return {
        a:1,
        b:2
      }
    }

    const x1 = data();
    const x2 = data(); */
  </script>
</html>
